<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        autofocus
        @keydown.enter="addTask"
        v-model="todoTask"
      />
    </header>

    <section class="main">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        :checked="isAll"
        @click="checkAll"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          v-for="item in selList"
          :key="item.id"
          :class="{ completed: item.isDone }"
        >
          <div class="view">
            <input
              class="toggle"
              type="checkbox"
              :checked="item.isDone"
              @click="toggleCheck(item.id)"
            />
            <label>{{ item.task }}</label>
            <button class="destroy" @click="delTask(item.id)"></button>
          </div>
          <input class="edit" value="Rule the web" />
        </li>
      </ul>
    </section>

    <footer class="footer" v-if="list.length">
      <span class="todo-count"
        ><strong>{{ todoCount }}</strong> item left</span
      >
      <ul class="filters">
        <li>
          <a
            :class="{ selected: type === 'all' }"
            href="#/"
            @click="changeType('all')"
            >All</a
          >
        </li>
        <li>
          <a
            href="#/active"
            :class="{ selected: type === 'active' }"
            @click="changeType('active')"
            >Active</a
          >
        </li>
        <li>
          <a
            href="#/completed"
            :class="{ selected: type === 'completed' }"
            @click="changeType('completed')"
            >Completed</a
          >
        </li>
      </ul>
      <button class="clear-completed" @click="clearDone">
        Clear completed
      </button>
    </footer>
  </section>
</template>

<script>
import { computed, reactive, toRefs, watch } from "vue";
export default {
  setup() {
    const state = reactive({
      list: JSON.parse(localStorage.getItem("vue3-todo-list")),
      todoTask: "",
      type: localStorage.getItem("vue3-todo-type"),
    });
    //删除单个任务
    const delTask = (id) => {
      state.list = state.list.filter((item) => item.id !== id);
    };

    //添加任务
    const addTask = () => {
      state.list = [
        { id: Date.now(), task: state.todoTask, isDone: false },
        ...state.list,
      ];
      state.todoTask = "";
    };
    //清理已完成
    const clearDone = () => {
      state.list = state.list.filter((item) => !item.isDone);
    };
    //切换选择
    const toggleCheck = (id) => {
      state.list = state.list.map((item) => {
        if (item.id === id) {
          return { ...item, isDone: !item.isDone };
        }
        return item;
      });
    };
    //未完成数量
    const todoCount = computed(() => {
      return state.list.filter((item) => !item.isDone).length;
    });
    //切换显示选项
    const changeType = (val) => {
      state.type = val;
      localStorage.setItem("vue3-todo-type", val);
    };
    //计算显示内容
    const selList = computed(() => {
      if (state.type === "active")
        return state.list.filter((item) => !item.isDone);
      if (state.type === "completed")
        return state.list.filter((item) => item.isDone);
      return state.list;
    });
    //设置全选
    const isAll = computed(() => {
      return state.list && state.list.every((item) => item.isDone);
    });
    //点击全选
    const checkAll = (e) => {
      // console.log(e.target.checked);
      state.list = state.list.map((item) => {
        return { ...item, isDone: e.target.checked };
      });
    };
    //通过侦听，存本地
    watch(
      () => state.list,
      (newVal) => {
        localStorage.setItem("vue3-todo-list", JSON.stringify(newVal));
      },
      { deep: true }
    );

    return {
      ...toRefs(state),
      delTask,
      addTask,
      clearDone,
      toggleCheck,
      todoCount,
      changeType,
      selList,
      isAll,
      checkAll,
    };
  },
};
</script>
